<template>
  <div class="main">
    <!-- 如果需要各种1：3，1：2分屏模式的需求的时候再做，现在懒得做了 <div class="choose-type">
      <div class="title">
        <h2 style="text-align:center;margin:1rem 0;">分屏模式</h2>
      </div>
    </div> -->
    <div class="fenping">
      <SubScreen class="subscreen" :num="1" @func="getView1"></SubScreen>
      <SubScreen class="subscreen" :num="2" @func="getView2"></SubScreen>
      <SubScreen class="subscreen" :num="3" @func="getView3"></SubScreen>
      <SubScreen class="subscreen" :num="4" @func="getView4"></SubScreen>
      <div class="close" @click="isClick">
        <p>退出全屏</p>
      </div>
    </div>
  </div>
</template>
<script>
import SubScreen from "./SubScreen";

export default {
  name: "Fenping",
  data() {
    return {
      view: [],
    };
  },
  components: {
    SubScreen,
  },
  watch: {
    view() {
      this.screenLink();
    },
  },
  methods: {
    isClick() {
      this.$router.back(-1);
    },
    getView1(view1) {
      this.view.push(view1);
    },
    getView2(view2) {
      this.view.push(view2);
    },
    getView3(view3) {
      this.view.push(view3);
    },
    getView4(view4) {
      this.view.push(view4);
      this.screenLink();
    },
    screenLink() {
      this.synchronizeManyView(this.view);
    },
    synchronizeManyView(views) {
      let that = this;
      let handles = views.map(function (view, idx, views) {
        let others = views.concat();
        others.splice(idx, 1);
        return that.synchronizeView(view, others);
      });
    },
    synchronizeView(view, others) {
      others = Array.isArray(others) ? others : [others];
      let that = this;
      let viewpointHandle,
        viewStationaryHandle,
        otherinteracttHandle,
        scheduleId;

      var clear = function () {
        if (otherinteracttHandle) {
          otherinteracttHandle.forEach(function (handle) {
            handle.remove();
          });
        }
        viewpointHandle && viewpointHandle.remove();
        viewStationaryHandle && viewStationaryHandle.remove();
        scheduleId && clearTimeout(scheduleId);
        otherinteracttHandle = viewpointHandle = viewStationaryHandle = scheduleId = null;
      };

      let interactWatcher = view.watch(
        "interacting, animation",
        function (newValue) {
          if (!newValue) {
            return;
          }

          if (viewpointHandle || scheduleId) {
            return;
          }

          scheduleId = setTimeout(function () {
            scheduleId = null;
            viewpointHandle = view.watch("viewpoint", function (newViewpoint) {
              others.forEach(function (temp) {
                // console.log(temp);
                temp.viewpoint = newViewpoint;
              });
            });
          }, 0);

          otherinteracttHandle = others.map(function (otherView) {
            return otherView.watch("interacting, animation", function (value) {
              if (value) {
                clear();
              }
            });
          });
        }
      );

      return {
        remove: function () {
          this.remove = function () {};
          that.clear();
          interactWatcher.remove();
        },
      };
    },
  },
};
</script>
<style lang='scss' scoped>
.main {
  display: flex;
  height: 100%;
  width: 100%;
  .choose-type {
    width: 20rem;
  }
  .fenping {
    flex: 1;
    height: 100%;
    .subscreen {
      position: relative;
    }
    .close {
      position: absolute;
      top: 80px;
      right: 20px;
      width: 90px;
      height: 40px;
      border-radius: 8px;
      background-color: rgb(2,64,85);
      color: white;
      text-align: center;
      &:hover {
        cursor: pointer;
      }
      & > p:hover {
        color: #0df2c9;
      }
      & > p {
        font-size: 1.1em;
        margin-top: 10px;
      }
    }
  }
}
</style>
